<!-- 信贷风险报告详情 -->
<template>
	<view class="container">
		<Navbar title="报告详情" bgColor="#6A1CF3" leftIconColor="#fff" :titleStyle="{color: '#fff'}" />
		
		<Banner />
		<Tabs class="mb-40" />
		
	<view class="bgCon relative">
		<view class="content d-flex">
			<!-- <Analyze class="mb-40" :info="details['DPA32Y002R04500388-DSA32BRY0450']" /> -->
			
			<!-- <Overview class="mb-40" :data="details['DPA31Y002T03150260-DSA31TCX031']" /> -->
			
			<BaseInfo class="mb-40" :info="details.info" />
			
			<!-- <Pressure class="mb-40" /> -->
			
			<Long class="mb-40" :info="details.mechanism" />
			
			<!-- <Abnormal class="mb-40" /> -->
			
			<Related class="mb-40" :info="details?.case" />
			
			<LossTrust class="mb-40" title="失信案件扫描" subtitle="失信案件数" v-if="details?.sxCase?.length || false" :info="details.sxCase" />
			<LossTrust class="mb-40" title="执行案件扫描" subtitle="执行案件数" :info="details.zxCase" v-if="details?.zxCase?.length || false" />
			<LossTrust class="mb-40" title="限制高消费信息" subtitle="限高执行案件数" v-if="details?.xgCase?.length || false" :info="details.xgCase" />
			
			<Networking class="mb-40" />
			
		</view>
	</view>
	
	<view class="fixed handle">
		<view class="getTop d-flex mb-20" @tap="getTop">
			<Icon name="arrow-upward" class="top" size="42rpx" color="#6A1CF3"></Icon>
		</view>
		<navigator class="getTop ts d-flex mb-20">
			投诉
		</navigator>
		
		<navigator class="getTop ts d-flex" @tap="getTop">
			<Icon name="share" class="top" size="46rpx" color="#6A1CF3"></Icon>
		</navigator>
	</view>
		
		<Footer />
	</view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	import Icon from '@/components/Icon/index.vue'
	import Navbar from '@/components/Navbar/index.vue'
	import Banner from './components/Banner.vue'
	import Tabs from './components/Tabs.vue'
	import Analyze from './components/Analyze.vue'
	import Overview from './components/Overview.vue'
	import BaseInfo from './components/BaseInfo.vue'
	import Pressure from './components/Pressure.vue'
	import Long from './components/Long.vue'
	import Abnormal from './components/Abnormal.vue'
	import LossTrust from './components/LossTrust.vue'
	import Related from './components/Related.vue'
	import Networking from './components/Networking.vue'
	import Footer from './components/Footer.vue'
	
	import { GetPersonalRepot } from '@/api/order.js'
	import { maskName, maskIDCard, maskMobile } from '@/utils/format.js'
	
	const details = ref({})
	
	// 获取详情
	const getDetail = async () => {
		try {
			const res = await GetPersonalRepot({ordernumber: '6542a8f7251646f1a810'})
			
			const { data } = res.data
			
			console.log(maskName(data['DPA31Y002T03150260-DSA31TCX0315'].name), '415246')
			
			if (data['DPA31Y002T03150260-DSA31TCX0315']) {
				data['DPA31Y002T03150260-DSA31TCX0315'].name = maskName(data['DPA31Y002T03150260-DSA31TCX0315'].name)
				data['DPA31Y002T03150260-DSA31TCX0315'].card = maskIDCard(data['DPA31Y002T03150260-DSA31TCX0315']['id_card'])
				data['DPA31Y002T03150260-DSA31TCX0315'].phone = maskMobile(data['DPA31Y002T03150260-DSA31TCX0315'].phone)
			}
			
			details.value = {
				info: data['DPA31Y002T03150260-DSA31TCX0315'],
				zxCase: data['DPA32Y002D04210362-DSA32FYY0421']?.implement?.case || [],  // 执行案件
				sxCase: data['DPA32Y002D04190364-DSA32FYY0419']?.implement?.case || [], // 失信案件
				xgCase: data['DPA32Y002D04200363-DSA32FYY0420']?.implement?.case || [], // 限高案件
				case: data['DPA32Y002D04210362-DSA32FYY0421'], // 关联案件数
				mechanism: data['DPA32Y002D03100259-DSA32TCX0310']  // 机构信息
			}
			console.log(details.value.case)
		} catch (err) {}
	}
	
	getDetail()
	
	// 返回顶部
	const getTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 3000
		})
	}
</script>

<style lang="scss" scoped>
.container {
	height: auto;
	min-height: 100vh;
	background-color: #F0F2FF;
	
	.content {
		margin-bottom: -20rpx;
		flex-direction: column;
		padding: 0 25rpx;
		
		::v-deep {
			.card {
				flex-direction: column;
				&_head {
					align-items: center;
					justify-content: center;
					&_title {
						z-index: 2;
						margin-left: auto;
						margin-right: auto;
						background-color: #6642EA;
						padding: 20rpx 120rpx;
						border-radius: 40rpx;
						color: #fff;
						font: {
							size: 28rpx
						}
					}
					
					&:before {
						content: '';
						position: absolute;
						top: -15rpx;
						background-color: #fff;
						padding: 40rpx 175rpx;
						border-radius: 80rpx;
						border: 1px solid #6642EA;
						box-sizing: border-box;
					}
				}
			
				&_content {
					padding: 35rpx 50rpx;
					border-radius: 18rpx;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
					background-color: #fff;
					
					&_describe {
						color: #959CA2;
						font: {
							size: 26rpx
						}
					}
				}
			}
		}
	}
}

.handle {
	right: 25rpx;
	bottom: 100rpx;
	z-index: 9;
	
	.getTop {
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border: 4rpx solid #6A1CF3;
		border-radius: 50%;
		font: {
			size: 25rpx
		}
		
		&.ts {
			width: 73rpx;
			height: 73rpx;
			color: #6A1CF3;
		}
	}
}
</style>
